<template>
  <div class="left-center">
    <div class="inner-top">
      <div ref="echartsContainer" style="width: 300px; height: 260px;"></div>
      <div class="inner-title">
        A类考试通过率
      </div>
    </div>
    <div class="inner-top">
      <div ref="echartsContainer2" style="width: 300px; height: 260px;"></div>
      <div class="inner-title">
        B类考试及格率
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { queryRecordsPassPercent, queryRecordsPassPercentB } from '@/api/driver.js'
export default {
  data () {
    return {
      config: {
        value: 80,
        localGradient: true
      }
    }
  },
  mounted () {
    this.getQueryRecordsPassPercent()
    this.getQueryRecordsPassPercentB()
  },
  methods: {
    getQueryRecordsPassPercent () {
      queryRecordsPassPercent().then(res => {
        let aaa = res.data.data
        let lableData = []
        let valueData = []
        aaa.map(q => {
          lableData.push(q.recordsName)
          valueData.push(Number(q.recordsPassPercent))
        })
        var myChart = echarts.init(this.$refs.echartsContainer)
        myChart.setOption({
          legend: {
            show: false
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: lableData,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#01AAFF',
                fontSize: 14
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#01AAFF'
              }
            },
            axisTick: {
              show: true,
              length: 4,
              lineStyle: {
                color: '#01AAFF'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#01AAFF40', '#01AAFF60']
              }
            }
          },
          yAxis: {
            type: 'value',
            axisTick: {
              show: true,
              length: 4,
              lineStyle: {
                color: '#01AAFF'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#01AAFF'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#01AAFF',
                fontSize: 14
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#01AAFF40', '#01AAFF60']
              }
            }
          },
          series: [{
            data: valueData,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#01AAFF',
                borderColor: '#54c5ef',
                borderWidth: 2
              }
            },
            // 可以是 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
            symbol: 'circle',
            // 设置点的大小
            symbolSize: 10,
              /*
                  'samesign' 只在要堆叠的值与当前累积的堆叠值具有相同的正负符号时才堆叠。
                  'all' 堆叠所有的值，不管当前或累积的堆叠值的正负符号是什么。
                  'positive' 只堆积正值。
                  'negative' 只堆叠负值。
              */
            // 数据堆叠，同个类目轴上系列配置相同的 stack 值可以堆叠放置
            stack: 'Shipment',
            // 区域填充样式。设置后显示成区域面积图。
            areaStyle: {
              // 填充的颜色 -- 自定义区域渐变颜色
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0.25,
                    color: '#01AAFF40'
                  },
                  {
                    offset: 1,
                    color: '#01AAFF60'
                  }
                ]
              }
            },
            lineStyle: {
              color: '#01AAFF'
            },
            emphasis: {
              /*
                  'none' 不淡出其它图形，默认使用该配置。
                  'self' 只聚焦（不淡出）当前高亮的数据的图形。
                  'series' 聚焦当前高亮的数据所在的系列的所有图形。
              */
              focus: 'series'
            }
          }]
        })
      })
    },
    getQueryRecordsPassPercentB () {
      queryRecordsPassPercentB().then(res => {
        console.log(res.data.data, 234343434)
        let aaa = res.data.data
        let lableData = []
        let valueData = []
        aaa.map(q => {
          lableData.push(q.recordsName)
          valueData.push(Number(q.recordsPassPercent))
        })
        var myChart2 = echarts.init(this.$refs.echartsContainer2)
        myChart2.setOption({
          legend: {
            show: false
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: lableData,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#01AAFF',
                fontSize: 14
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#01AAFF'
              }
            },
            axisTick: {
              show: true,
              length: 4,
              lineStyle: {
                color: '#01AAFF'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#01AAFF40', '#01AAFF60']
              }
            }
          },
          yAxis: {
            type: 'value',
            axisTick: {
              show: true,
              length: 4,
              lineStyle: {
                color: '#01AAFF'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#01AAFF'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#01AAFF',
                fontSize: 14
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#01AAFF40', '#01AAFF60']
              }
            }
          },
          series: [{
            data: valueData,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#01AAFF',
                borderColor: '#54c5ef',
                borderWidth: 2
              }
            },
            // 可以是 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
            symbol: 'circle',
            // 设置点的大小
            symbolSize: 10,
              /*
                  'samesign' 只在要堆叠的值与当前累积的堆叠值具有相同的正负符号时才堆叠。
                  'all' 堆叠所有的值，不管当前或累积的堆叠值的正负符号是什么。
                  'positive' 只堆积正值。
                  'negative' 只堆叠负值。
              */
            // 数据堆叠，同个类目轴上系列配置相同的 stack 值可以堆叠放置
            stack: 'Shipment',
            // 区域填充样式。设置后显示成区域面积图。
            areaStyle: {
              // 填充的颜色 -- 自定义区域渐变颜色
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0.25,
                    color: '#01AAFF40'
                  },
                  {
                    offset: 1,
                    color: '#01AAFF60'
                  }
                ]
              }
            },
            lineStyle: {
              color: '#01AAFF'
            },
            emphasis: {
              /*
                  'none' 不淡出其它图形，默认使用该配置。
                  'self' 只聚焦（不淡出）当前高亮的数据的图形。
                  'series' 聚焦当前高亮的数据所在的系列的所有图形。
              */
              focus: 'series'
            }
          }]
        })
      })
    }
  }
}
</script>

<style lang='scss' scoped>
  .left-center{
    height: 100%;
    padding: 20px;
    display: flex;
    flex-direction: row;
    color: rgba(84,197,239,1);
    .inner-top{
      height: 100%;
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .inner-title{
        font-size: 22px;
      }
    }
  }
</style>